<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import VueDraggableResizable from 'vue-draggable-resizable'

const chatVisible = ref(false)
const width = ref(0) // 初始宽度
const height = ref(0) // 初始高度

const toggleChat = () => {
  event.stopPropagation() // 阻止事件冒泡
  chatVisible.value = !chatVisible.value
}
const handleClickOutside = (event) => {
  const chatWindow = document.querySelector('.chat-window')
  if (chatWindow && !chatWindow.contains(event.target)) {
    chatVisible.value = false
  }
}

// 处理调整大小事件
const handleResize = (x, y, newWidth, newHeight) => {
  width.value = newWidth
  height.value = newHeight
}

onMounted(() => {
  window.addEventListener('click', handleClickOutside)
})

onUnmounted(() => {
  window.removeEventListener('click', handleClickOutside)
})
</script>
<template>
  <div class="ai-assist">
    <!-- AI按钮 -->
    
    <div @click="toggleChat" class="btn">
      <svg fill="#0092E4" t="1733837798114" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5441" xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="40"><path d="M537.3171808 317.05508586c-19.3292192-3.95946667-32.9240384-4.36906667-51.0439616-1.24830507-6.49508587 9.12822827-8.95268587 12.288-13.2632384 17.2032-9.28426667 10.5715808-18.39299093 17.3592384-29.92030507 19.54377174-4.93470507 0.95573333-9.84990507 1.98948587-14.72609493 3.1207616l-16.4815232 3.8424384v0.05851413l-15.135696 5.01272427c-131.13051413 43.5736384-214.4743616 158.04708587-214.4743616 291.45965653 0 165.12731413 143.6915808 274.6855616 329.0648384 274.6855616 189.54727573 0 329.0648384-107.74430507 329.06483733-274.6855616 0-133.66613333-83.6364192-248.2956192-215.17653333-291.69371413l-15.4087616-5.0712384-15.70133333-3.64738987c-4.8371808-1.13127573-9.6743616-2.14552427-14.5115424-3.08175253-11.50780907-2.18453333-20.6360384-8.97219093-29.92030507-19.52426667-4.096-4.6811424-6.53409493-7.80190507-12.3660192-15.99390507z m-163.84-14.72609493c1.13127573-39.38011413 2.14552427-68.46171413-1.20929493-118.1988576l-3.95946667-0.85820907c-66.21866667-11.66384747-142.15070507-85.74293333-97.25074347-135.5776 30.32990507-33.6652192 93.42780907 12.1124576 104.3504768 23.6007616 32.06582827 33.78224747 38.89249493 51.0439616 40.27733334 78.46765653 0.78019093 19.9143616 1.69691413 68.6567616 1.54087573 124.20632427 11.41028587 2.10651413 19.5047616 11.0592 24.22491413 24.14689492 2.4576-3.1207616 5.46133333-7.33379093 11.83939094-16.36449492 22.72304747-32.22186667 34.816-44.27580907 58.04617173-44.27580907 1.95047573 0 3.82293333 0.0780192 5.63687573 0.23405654 5.18826667-3.5108576 10.53257173-5.53935253 16.07192427-5.53935254 14.62857173 0 20.03139093 14.31649493 23.24967573 31.89028587 4.03748587 5.0712384 8.32853333 10.92266667 13.1072 17.6908192 6.144 8.73813333 9.1672384 12.97066667 11.60533334 16.07192426 1.18979093-3.31580907 2.65264747-6.3000384 4.36906666-8.97219093 4.29104747-6.5536 9.84990507-10.74712427 15.8963808-12.77561921 1.65790507-47.00647573 3.82293333-61.55702827 4.096-64.38521919 1.57988587-17.26171413 6.51459093-70.43169493 52.62384747-75.01531413 27.7747808-2.76967573 62.0056384 3.23779093 88.31756267 13.22422826 28.3404192 10.78613333 59.78209493 36.59093333 51.6876192 71.85554347-9.53782827 41.38910507-58.0071616 30.2323808-81.490896 24.2444192-12.09295253-3.08175253-55.25699093-20.98712427-69.241904-33.93828586-2.73066667 23.15215253-2.3795808 57.55855253-1.42384854 91.0872384 3.25729493 6.67062827 5.85142827 14.04342827 7.56784854 21.49424746 142.6188192 53.0139424 233.43299093 182.07695253 233.43298986 331.385904 0 195.98384747-162.6112 321.55550507-375.50567573 321.55550507-208.6424384 0-375.50567573-127.2295616-375.5056768-321.536 0-148.62628587 89.99497173-277.24068587 231.52152427-330.68373333 1.0727616-8.30902827 3.1207616-16.1304384 6.10498986-23.0351232z m-8.7771424 347.08723732c0 78.4091424 67.19390507 142.4627808 150.63527573 142.46278081 83.4803808 0 150.63527573-64.0536384 150.6352768-142.4627808 0-78.3896384-67.1744-142.44327573-150.6352768-142.44327573-83.44137173 0-150.63527573 64.0536384-150.63527573 142.44327573z m-43.45661013 1e-8c0-103.18019093 87.1667808-186.30948587 194.09188586-186.30948587 106.94460907 0 194.11139093 83.12929493 194.11139094 186.30948586s-87.18628587 186.32899093-194.11139094 186.32899094-194.09188587-83.1488-194.09188586-186.32899094z" p-id="5442"></path></svg>
    </div>
    <vue-draggable-resizable
      :w="width"
      :h="height"
      :resizable="true"
      :draggable="true"
      @resizing="handleResize"
      @dragging="handleDragging"
    >
      <transition name="fade">
        <!-- <div v-if="chatVisible" class="chat-window">
          <div class="chat-header">
            <span>白 蚁 智 能 问 答</span>
          </div>
          <div class="chat-body">
            <iframe src="https://www.doubao.com/chat/" frameborder="0"></iframe>
          </div>
        </div> -->
        <ai-window v-if="chatVisible" class="chat-window" ></ai-window>
      </transition>
    </vue-draggable-resizable>
  </div>
</template>
<style lang="scss" scoped>
.ai-assist {
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 99999;
}
.chat-window {
  position: absolute;
  bottom: 30px;
  right: 115px;
  z-index: 10000;
  width: 550px;
  height: 550px;
  background-color: white;
  border: 1px solid #ddd;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 10000;
  display: grid;
  place-items: center;
  background: transparent;
  padding: 1em;
  border-radius: 38px;
  box-shadow:
    6px 6px 10px -1px rgba(0, 0, 0, 0.15),
    -6px -6px 10px -1px rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(0, 0, 0, 0);
  cursor: pointer;
  transition: transform 0.5s;
}

.btn:hover {
  box-shadow:
    inset 4px 4px 6px -1px rgba(0, 0, 0, 0.2),
    inset -4px -4px 6px -1px rgba(255, 255, 255, 0.7),
    -0.5px -0.5px 0px rgba(255, 255, 255, 1),
    0.5px 0.5px 0px rgba(0, 0, 0, 0.15),
    0px 12px 10px -10px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.1);
  transform: translateY(0.5em);
}

.btn svg {
  transition: transform 0.5s;
}

.btn:hover svg {
  transform: scale(0.9);
  fill: #333333;
}
</style>
